<admintpl file="wx_header"/>
<div class="container" id="app">
    <div class="row m1">
        <div class="col-md-4 brand">
            <a href="{:U('index',array('key'=>$pageKey))}"><i class="glyphicon glyphicon-circle-arrow-left"></i> 素材库</a>/
            <a class="active">新建图文消息</a>
        </div>
    </div>
    <div class="row rb">
        <div class="col-md-3 bg-default rb-r" style="padding: 3% 3%">
            <div class="row" >
                <template v-for="(item,index) in list">
                    <template v-if="index==0">
                        <div class="addImgText addImgTextChosen"  :index="index" style="position: relative;" @click="chose(index)">
                            <div class="thumbnail" style="padding: 3%;border-radius:0;margin-bottom: 0 " >
                                <a href="#" class="show" style="display: block;position: relative">
                                    <img :src="item.img|defaultImg" :alt="item.title">
                                    <div class="shade">
                                        {{item.title|default}}
                                    </div>
                                </a>
                            </div>
                           <div class="shade-hover clearFloat" v-if="list.length>1">
                                <div class="col-md-4">
                                    <i class="glyphicon glyphicon-arrow-down" @click="down(index)"></i>
                                </div>
                           </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="col-md-12 addImgText" style="padding: 3%;position: relative"  :index="index" @click="chose(index)">
                            <div  class="clearFloat">
                                <h5 class="pull-left col-md-8">{{item.title|default}}
                                </h5>
                                <div class="thumbnail pull-right col-md-4">
                                    <a href="#" class="show">
                                        <img :src="item.img|defaultImg" :alt="item.title" >
                                    </a>
                                </div>
                            </div>
                            <div class="shade-hover clearFloat">
                                <div class="col-md-4">
                                    <i class="glyphicon glyphicon-arrow-up" @click="up(index)"></i> <i class="glyphicon glyphicon-arrow-down" @click="down(index)" v-if="index<4&&index!=list.length-1"></i>
                                </div>
                                <div class="col-md-4 col-md-offset-4">
                                    <i class="glyphicon glyphicon-trash"  @click="trash(index)" @click.stop=""></i>
                                </div>
                            </div>
                        </div>
                    </template>
                </template>
                <div class="col-md-12 addMore" style="margin-top:0;border-width: 0 2px 2px 2px;border-radius: 0;border-style: dotted;border-color:#8d8d8d" v-show="list.length<4" @click="addOne">
                    <div class="center-block">
                        <p style="font-size: 5em;line-height: 1.2em;color:#e0e0e0;cursor: pointer" align="center">+</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 rb-r">
            <form class="form-horizontal">
                <div class="form-group " style="margin-top:5%">
                    <label for="title" class="col-md-2 control-label">文章标题</label>
                    <div class="col-md-8">
                        <input type="text" name="title" class="form-control form-line" id="title" placeholder="请在这里输入标题" v-model="list[actIndex].title" @focus="list[actIndex].title_show=true" @blur="list[actIndex].title_show=false"/>
                    </div>
                    <span class="help-block" id="title-help" v-if="list[actIndex].title_show" :style="titleStyle">{{list[actIndex].title.length}}/{{list[actIndex].title_count}}</span>
                </div>
                <div class="form-group">
                    <label for="author" class="col-md-2 control-label">作者</label>
                    <div class="col-md-8">
                        <input type="text" name="author" class="form-control" id="author" placeholder="请输入作者" @focus="list[actIndex].author_show=true" @blur="list[actIndex].author_show=false" v-model="list[actIndex].author"/>
                    </div>
                    <span class="help-block" id="author-help" v-if="list[actIndex].author_show" :style="authorStyle">{{list[actIndex].author.length}}/{{list[actIndex].author_count}}</span>
                </div>
                <div class="form-group">
                    <div class="col-md-12" id="contentis">
                       <textarea id="content" name="content" v-model="list[actIndex].content"></textarea>
                   </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="is_url"  v-model="list[actIndex].has_url"/> 原文链接
                    </label>
                </div>
                <div class="form-group" v-if="list[actIndex].has_url">
                   <div class="col-md-10 col-md-offset-2">
                        <input type="url" class="form-control" name="url" v-model.trim="list[actIndex].url" />
                   </div>
                    <span class="help-block" id="url-help" ><span class="text-danger">{{list[actIndex].urlErr}}</span></span>
                </div>
                <br/>
                <br/>
                <div class="form-group">
                    <div class=" col-md-8">
                        <p style="color:#000;font-size:1.2em">封面 <span style="font-size:0.8em;color:#8d8d8d;">小图片建议尺寸：200像素 * 200像素</span></p>
                        <div v-if="list[actIndex].img" class="">
                        <a href="javascript:void(0)" class="thumbnail item" style="padding: 0;border: none;">
                                <img :src="list[actIndex].img">
                            <div class="shade-big" @click="trashImg(actIndex)">
                                <div>
                                    <div>
                                        <p style="text-align: center!important;"><i class="glyphicon glyphicon-trash" style="font-size:2em"></i></p>
                                    </div>
                                </div>
                            </div>
                        </a>

                        </div>
                        <div>
                            <button class="btn btn-default" type="button" @click="getImgFromEditor">从正文选择</button>
                            <button class="btn btn-default" type="button" @click="layer">从图片库选择</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3 rb-r"></div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.all.min.js"></script>

<admintpl file="wx_footer"/>
<script>
    Page = {
        substr:function (str,lenght) {
            var n = lenght;
            var r=/[^\x00-\xff]/g;
            if(str.replace(r,"mm").length<=n){return str;}
            var m=Math.floor(n/2);
            for(var i=m;i<str.length;i++){
                if(str.substr(0,i).replace(r,"mm").length>=n){
                    return str.substr(0,i)+"...";
                }
            }
            return str;
        },
        fontLength:function (obj,count) {
            e = obj.length
            if(e>count)
                css = '#900';
            else if(e<count)
                css = '#737373';
            else
                css = '#43b548';
            return 'color:'+css;
        },
        editor:function () {
            //obj.getContent获得包含html标签的内容
            //obj.getContentTxt
            var $toolbars = [
                //第一行
                ['fullscreen', 'source', 'undo', 'redo'],
                //第二行
                ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'],
                //第三行
                [
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'background', //背景
                    'map', //Baidu地图
                ],
            ];
            var $options = {
                toolbars:$toolbars,//工具栏
                autoHeightEnabled:true,//高度自增
                theme:'wx',//主题
            }

            var ue = UE.getEditor('content',$options);

            return ue;
        },
        getImg:function (obj) {
            var txt = obj.getContent();
            var imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/g;
            var srcReg = /(src)={1}[\"|\']{1}(.*?)[\"|\']{1}/g;
            var arr = [];
            arr = txt.match(imgReg)
            var list = [];
            for(var i in arr){
                var src = arr[i].match(srcReg);
                src = src[0].replace('src="','');
                src = src.replace('"','');
                list.push(src);
            }
            return list;
        }
    }
    var app
    $(function () {
        app = new Vue({
            el:'#app',
            data:{
                actIndex:0,
                ue:{},
                list:[
                    {
                        title:'',
                        title_show:false,
                        title_count:64,
                        author:'',
                        author_show:false,
                        author_count:8,
                        content:'',
                        url:'',
                        has_url:false,
                        urlErr:false,
                        img:'',
                        imgId:''
                    },
                ],
            },
            methods:{
                chose:function (e) {
                    $('.addImgText').removeClass('addImgTextChosen');
                    $('.addImgText[index='+e+']').addClass('addImgTextChosen');
                    var _val = this.ue.getContent();
                    this.list[this.actIndex].content=_val;
                    this.actIndex = e;
                    this.ue.execCommand('cleardoc');
                    this.ue.setContent(this.list[e].content);
                    //                    this.ue.reset();
                },
                down:function (e) {
                    if(this.actIndex==e) {
                        var _val = this.ue.getContent();
                        this.list[e].content = _val;
                        this.ue.setContent(this.list[e + 1].content);
                    }else if((e+1)==this.actIndex){
                        var _val = this.ue.getContent();
                        this.list[e+1].content = _val;
                        this.ue.setContent(this.list[e].content);
                    }else{
                        this.ue.setContent(this.list[e+1].content);
                    }
                    var x = this.list[e]
                    var x1 = this.list[e+1];


                    this.list.splice(e,1,x1);
                    this.list.splice(e+1,1,x);
                },
                up:function (e) {
                    if(this.actIndex==e) {
                        var _val = this.ue.getContent();
                        this.list[e].content = _val;
                        this.ue.setContent(this.list[e - 1].content);
                    }else if((e-1)==actIndex){
                        var _val = this.ue.getContent();
                        this.list[e-1].content = _val;
                        this.ue.setContent(this.list[actIndex].content);
                    }else{
                        this.ue.setContent(this.list[e-1].content);
                    }
                    var x = this.list[e]
                    var x1 = this.list[e-1];

                    this.list.splice(e,1,x1);
                    this.list.splice(e-1,1,x);
                },
                trash:function (e){
                    if(this.actIndex==e){
                        this.actIndex = 0;
                        this.ue.setContent(this.list[0].content)

                    }
                    this.list.splice(e,1);
                    $('.addImgText[index=0]').addClass('addImgTextChosen');
                },
                addOne:function () {
                    this.list.push(
                        {
                            title:'',
                            title_show:false,
                            title_count:64,
                            author:'',
                            author_show:false,
                            author_count:8,
                            content:'',
                            url:'',
                            has_url:false,
                            urlErr:false,
                            img:'',
                            imgId:''
                        }
                    )
                },
                trashImg:function (e) {
                  this.list[e].img = '';
                  this.list[e].imgId = '';
                  window.cacheImg = '';
                  window.cacheImgId = '';
                },
                getImgFromEditor:function () {
                    var _this = this;
                    window.cacheImg = '';
                    var imgList = Page.getImg(_this.ue);
                    var html = "<div class='row layer-imglist'>";
                    if(imgList.length>0){
                        for(var i in imgList){
                            html += '<div class="col-md-4">';
                            html += '<a href="javscript:void(0)" class="thumbnail">';
                            html += '<img src="'+imgList[i]+'" onclick="window.cacheImg = this.src" />';
                            html += '</a>';
                            html += '</div>';
                        }
                    }else{

                    }

                    html += "</div>";
                    layer.open({
                        type:1,
                        title:'选择图片',
                        maxmin:true,
                        resize:true,
                        area:['800px','600px'],
                        content:html,
                        btn:['确认'],
                        success: function(layero, index){
                            $('.layer-imglist').masonry();
                            console.log(layero, index);//层弹出
                        },
                        end:function () {
                            //层销毁
                        },
                        cancel:function () {
                            window.cacheImg = ''
                        },
                        yes:function (index,layero) {
                            _this.choesImg(_this.actIndex)
                            layer.close(index);
                        }
                    })
                },
                layer:function () {
                    var _this = this;
                    layer.open({
                        title:'选择图片',
                        content:"<p>"+_this.actIndex+"</p>"
                    })
                },
                choesImg:function (e) {
                    if(window.cacheImg!=undefined&&window.cacheImg){
                        this.list[e].img = window.cacheImg;
                    }
                    if(window.cacheImgId!=undefined&&window.cacheImgId!=''){
                        this.list[e].imgId = window.cacheImgId;
                    }
                    window.cacheImg = '';
                    window.cacheImgId = '';
                }
            },
            filters:{
                default:function (e) {
                    if(e=='')
                        return '标题';
                    else
                        return e;
                },
                defaultImg:function (e) {
                    if(e=='')
                        return '__PUBLIC__/images/default.png';
                    else
                        return e;
                },
            },
            computed:{
                titleStyle:function () {
                    var _index=this.actIndex;
                    return Page.fontLength(this.list[_index].title,this.list[_index].title_count);
                },
                authorStyle:function () {
                    var _index=this.actIndex;
                    return Page.fontLength(this.list[_index].author,this.list[_index].author_count);

                },

            },
            mounted:function () {
                this.ue = Page.editor();
            }
        })
    })
</script>
